<template>
  <div>
    <base-layout>
      <template #searchPanel>
        <el-col :span="11">
          <el-row>
            <p>常用检查项</p>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-checkbox-group v-model="selectCommonList" size="medium" fill="#67C23A">
              <el-col :span="6" v-for="item in commonlyUused" :key="item.id">
                <el-checkbox-button :label="item">{{
                  item.projectName
                }}</el-checkbox-button>
              </el-col>
            </el-checkbox-group>
          </el-row>
        </el-col>
        <el-col :span="13">
          <el-row>
            <el-col :span="18">
              <p>内部检查</p>
            </el-col>
            <el-col :span="2">
              <el-button icon="el-icon-plus" type="primary" @click="addItem"
                >新增检查项</el-button
              >
            </el-col>
          </el-row>
          <el-divider content-position="center" widht="100px"></el-divider>
          <el-row>
            <data-table
              :isShowSelection="true"
              :value="tableData"
              :total-count="totalCount"
              :table-column-attributes="tableColumnAttributes"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @selection-change="selectionChange"
              :width="160"
            >
            </data-table>
          </el-row>
        </el-col>
      </template>
      <template #contentPanel>
        <el-row>
          <el-col :span="24" align="right" justify="center">
            <el-button type="success" @click="addCommon">保存为常用检测项</el-button>
            <el-button type="success" @click="select">选择检测项</el-button>
          </el-col>
        </el-row>
      </template>
    </base-layout>

    <el-dialog
      title="新增检测项目"
      :visible.sync="showFrom"
      :append-to-body="true"
      width="500px"
    >
      <el-form
        :model="form"
        :inline="true"
        ref="fromdata"
        label-width="110px"
        label-position="right"
      >
        <el-row>
          <el-form-item label="检测项目名称">
            <el-input v-model="form.projectName"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="检测项目种类">
            <el-input v-model="form.projectType"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="检测项目描述:">
            <el-input
              type="textarea"
              :rows="6"
              placeholder=""
              v-model="form.projectDesc"
              style="width: 300px"
            >
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveItem">新增检测项</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="保存为常用检测项"
      :visible.sync="showCommon"
      :append-to-body="true"
      width="500px"
    >
      <el-form
        :model="commonForm"
        :inline="true"
        ref="commonForm"
        label-width="110px"
        label-position="right"
      >
        <el-row>
          <el-form-item label="常用检测名称">
            <el-input v-model="commonForm.frequentlyName"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="检测项目描述:">
            <el-input
              type="textarea"
              :rows="6"
              placeholder=""
              v-model="commonForm.frequentlyDesc"
              style="width: 300px"
            >
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveCommon">新增常用检测项</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import baseMixin from "@/mixins/base";
import {
  checkProjectPage,
  frequently,
  checkProjectAdd,
} from "@/api/after-sale/workOrderManage/pickUpOrder";
import { getDict, getStoreId } from "@/utils";
export default {
  mixins: [
    baseMixin({
      idName: "id",
      findData: checkProjectPage,
      addData: checkProjectAdd,
      dataName: ["content", "totalRecords"],
      format(res) {
        return res.map((data) => {
          return data;
        });
      },
    }),
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: "检查项目", value: "projectName", type: "text" },
        { name: "检查细节描述", value: "projectDesc", type: "text" },
        { name: "检查种类", value: "projectType", type: "text" },
      ],
      commonlyUused: [], // 常用项
      form: {}, // 检查项表单
      commonForm: {}, // 常用检查项表单
      showFrom: false,
      showCommon: false,
      selectList: [], // 检测项选择
      selectCommonList: [], // 常用检测项选择
    };
  },
  methods: {
    // 新增检测项
    addItem() {
      this.showFrom = true;
    },
    // 新增常用检测项
    addCommon() {
      this.showCommon = true;
    },
    // 保存检测箱
    saveItem() {
      this.form.storeId = getStoreId();
      checkProjectAdd(this.form).then((res) => {
        let { success, message } = res;
        if (success) {
          this.showFrom = false;
          this.form = {};
          this.$message.success("操作成功");
          this.setTableData();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 保存常用检测项
    saveCommon() {
      this.commonForm.storeId = getStoreId();
      frequently(this.commonForm).then((res) => {
        let { success, message } = res;
        if (success) {
          this.showCommon = false;
          this.form = {};
          this.$message.success("操作成功");
          this.query();
          this.setTableData();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    async query() {
      let from = {
        projectType: "常用",
        storeId: 8,
      };
      let { data } = await checkProjectPage(from, 1000, 1);
      this.commonlyUused = data.content;
    },
    // 监听表格选择
    selectionChange(value) {
      this.selectList = value;
    },
    // 选择
    select() {
      this.selectCommonList.forEach((e) => {
        this.selectList.push(e);
      });
      this.$emit("selectItem", this.selectList);
    },
  },
  mounted() {
    this.query();
  },
};
</script>
<style lang="scss" scope></style>
